extends ../layout

block content
	include ../navbar
	link(rel='stylesheet', href='/plugins/fancybox/fancybox-2.1.5.css')
	style(scoped).
		.main { padding: 0 20px; }
		.menu { margin-bottom: 10px; }
		.pictures {
			margin-top: 0;
		}
		.picture {
			position: relative;
			overflow: hidden;
			margin-bottom: -3px;
		}
		.picture>div .desc {
			padding: 6px;
			position: absolute;
			top: 0;
			background-color: rgba(255, 255, 255, 0.5);
			word-break: break-all;
		}
		.fancybox-title-float-wrap .child {
			word-break: break-all;
		}
	script(src='/plugins/fancybox/fancybox-2.1.5.min.js')
	script(src='/js/albums/index.js')

	.main
		h1= album.title

		.pure-g-r
			.pure-u-1-4
				.menu.pure-menu.pure-menu-open
					a.pure-menu-heading Albums
					ul.albums
						each album in albums
							li.album(data-id=album._id)
								a(href='/albums/'+album._id)= album.title
			.pure-u-3-4
				- if (album)
					ul.pictures.pure-g-r
						each picture in album.pictures
							li.picture.pure-u-1-4(data-id=picture._id)
								- var url = '/albums/'+album._id+'/pictures/'+picture._id+'/image'
								a.fancybox(rel=album.title, href=url, title=picture.desc)
										img(src=url)
